<template>
	<view style="background-color: #f7f7f7;">
		<view class="top">
			<view class="back-btn" @click="backPage()">
				<view class="back-icon"></view>
			</view>
			<view style="text-align: center; font-size: 35rpx; color: #fff;" v-if="edit">注册</view>
			<view style="text-align: center; font-size: 35rpx; color: #fff;" v-if="!edit">商户资料</view>
			<view class="card">
				<view class="input_line">
					<text>负责人：</text>
					<input class="input" type="text" v-if="edit" v-model="shangjiarenzheng.director" placeholder="输入负责人姓名"/>
					<view v-else>{{ shangjiarenzheng.director }}</view>
				</view>
				<view class="input_line">
					<text>身份证号码：</text>
					<input class="input" type="text" v-if="edit" v-model="shangjiarenzheng.idCard" placeholder="输入负责人身份证号码"/>
					<view v-else>{{ shangjiarenzheng.idCard }}</view>
				</view>
				<view class="input_line">
					<text>手机号：</text>
					<input class="input" type="text" v-if="edit" v-model="shangjiarenzheng.mobile" placeholder="输入手机号"/>
					<view v-else>{{ shangjiarenzheng.mobile }}</view>
				</view>
				<view class="input_line" v-if="edit">
					<text>验证码：</text>
					<view class="input" style="color: gray; margin: 0; height: 30rpx; width: 290rpx; display: flex; justify-content: space-between; align-items: center;">
						<input style="font-size: 20rpx; width: 160rpx;" type="text" v-model="infor.code" placeholder="输入验证码"/>
						|<text style="color: #4c8efe;  padding: 5rpx;">获取验证码</text>
					</view>
				</view>
				<view class="input_line">
					<text>店名：</text>
					<input class="input" type="text" v-if="edit" v-model="dianpu.name" placeholder="输入店名"/>
					<view v-else>{{ dianpu.name }}</view>
				</view>
				<view class="input_line">
					<text>工商营业执照号码：</text>
					<input class="input" type="text" v-if="edit" v-model="shangjiarenzheng.businessLicenseId" placeholder="输入营业执照号码"/>
					<view v-else>{{ shangjiarenzheng.businessLicenseId }}</view>
				</view>
				<view class="input_line">
					<text>经营区域：</text>
					<input class="input" type="text" v-if="edit" v-model="dianpu.operatingArea" placeholder="选择区县"/>
					<view v-else>{{ dianpu.operatingArea }}</view>
				</view>
				<view class="input_line">
					<text>地址：</text>
					<input class="input" type="text" v-if="edit" v-model="dianpu.address" placeholder="输入详细地址"/>
					<view v-else>{{ dianpu.address }}</view>
				</view>
			</view>
		</view>	
		<view style="height: 400rpx;"></view>
		<view class="card">
			<view class="big_title">商家介绍</view>
			<textarea style="margin: 20rpx; padding: 10rpx; height: 200rpx; border: 1px solid gray; border-radius: 15px;" v-if="edit" v-model="dianpu.description" placeholder="请准确介绍一下公司"></textarea>
			<view v-else>{{ dianpu.description }}</view>
		</view>
		<view class="card">
			<view class="big_title">身份证证正反面照片</view>
			<view>
				<view class="card">
					<view class="card-title">正面 <text class="desc"></text></view>
					<view class="divider"></view>
					<view class="photo-upload">
						<view class="photo-box" @click="choosePhoto1">
							<text class="plus">+</text>
							<text class="upload-text">上传照片</text>
						</view>
						<image v-for="(img, index) in photo1" :key="index" class="photo-img" :src="img.url" @click="choosePhoto11(photo1,index)" />
					</view>
				</view>
				<view class="card">
					<view class="card-title">反面 <text class="desc"></text></view>
					<view class="divider"></view>
					<view class="photo-upload">
						<view class="photo-box" @click="choosePhoto2">
							<text class="plus">+</text>
							<text class="upload-text">上传照片</text>
						</view>
						<image v-for="(img, index) in photo2" :key="index" class="photo-img" :src="img.url" @click="choosePhoto11(photo2,index)" />
					</view>
				</view>
			</view>
			
		</view>
		<view class="card">
			<view class="big_title">营业执照</view>
			<view class="divider"></view>
			<view class="photo-upload">
				<view class="photo-box" @click="choosePhoto3">
					<text class="plus">+</text>
					<text class="upload-text">上传照片</text>
				</view>
				<image v-for="(img, index) in photo3" :key="index" class="photo-img" :src="img.url" @click="choosePhoto11(photo3,index)" />
			</view>
		</view>
		<view class="card">
			<view class="big_title">门面照片</view>
			<view class="divider"></view>
			<view class="photo-upload">
				<view class="photo-box" @click="choosePhoto4">
					<text class="plus">+</text>
					<text class="upload-text">上传照片</text>
				</view>
				<image v-for="(img, index) in photo4" :key="index" class="photo-img" :src="img.url" @click="choosePhoto11(photo4,index)" />
			</view>
		</view>
		<button  v-if="edit" style="margin: 50rpx 100rpx; border-radius: 25px; background-color: #5590f8; color: white;" @click="save()">保存</button>
		<button @click="edit=!edit" v-if="!edit" style="margin: 50rpx 100rpx; border-radius: 25px; background-color: #5590f8; color: white;">修改</button>
	</view>
</template>

<script setup>
import { ref,reactive } from 'vue';
import { onShow } from '@dcloudio/uni-app'
import request from "@/utils/request.js"
import baseUrl from '../../utils/urlConfig';
const shangjiarenzheng=ref({})
const dianpu=ref({})
const photo1 = reactive([])
const photo2 = reactive([])
const photo3 = reactive([])
const photo4 = reactive([])
onShow(() => {
  getList()
})
// function clearPhoto(photo){
// 	const newphoto=reactive([])
// 	photo=newphoto
// }
function getList(){
	uni.getStorage({
		key:"info",
		success: (res) => {
			// console.log(res.data)
			shangjiarenzheng.value=res.data
			photo1.length=0
			photo2.length=0
			photo3.length=0
			photofuzhi(photo1,shangjiarenzheng.value.front)
			photofuzhi(photo2,shangjiarenzheng.value.opposite)
			photofuzhi(photo3,shangjiarenzheng.value.businessLicenseImg)
		}
	})
	request({
		url:"/yyq/merchant/"+shangjiarenzheng.value.mid,
		method:'GET',
		success: (res) => {
			// console.log(res.data.data)
			dianpu.value=res.data.data
			console.log(dianpu.value)
		}
	})
}
function choosePhoto11(photo,index){
	photo.splice(index, 1)
}
function save(){
	shangjiarenzheng.value.front=photo1.map(item => item.url).join(',');
	shangjiarenzheng.value.opposite=photo2.map(item => item.url).join(',');
	shangjiarenzheng.value.businessLicenseImg=photo3.map(item => item.url).join(',');
	dianpu.value.auditStatusId=0;
	console.log(shangjiarenzheng.value)
	request({
		url:"/yyq/verification",
		method:'PUT',
		data:shangjiarenzheng.value,
		success: (res) => {
			console.log(res)
		}
	})
	getJingWei(dianpu.value.address)
	edit.value=!edit.value
	uni.navigateTo({
		url:"/pages/login/login"
	})
}
function getJingWei(add){
		uni.request({
			url:'https://restapi.amap.com/v3/geocode/geo',
			method:'GET',
			data:{
				key: 'cd2aeb25b049ef42261f6adb2caea630',
				address: add,// 该数据就可以根据输入框的内容进行动态设置
				output: 'json'
			},
			success: (res1) => {
				// console.log(res)
				let location = res1.data.geocodes[0].location
				dianpu.value.longitude=location.split(',')[0]
				dianpu.value.latitude=location.split(',')[1]
				// console.log(location.split(',')[1]);
				request({
					url:"/yyq/merchant",
					method:'PUT',
					data:dianpu.value,
					success: (res) => {
						console.log("修改店铺成功")
					}
				})
				
			}
		})
	}
function photofuzhi(photo,fanhui){
	const newPhotos=fanhui.split(',').map(url => ({ url }));
	for(let i=0;i<newPhotos.length;i++){
		photo.push(newPhotos[i])
	}
}
	function backPage(){
		uni.navigateBack()
	}

	const infor = ref({
		name:'张大美',
		idNum:'40365236666666',
		phone:'1889333333',
		code:'',
		shopName:'大美汽修店',
		shopNum:'4234234232321',
		shopArea:'焦作市山阳区',
		shopAdrr:'山阳区迎宾路32号',
		shopInfo:'你好啊，我爱的要哭。太棒了啊！'
		
	})
	
	const edit = ref(false);
	function choosePhoto1() {
			uni.chooseImage({
				count: 1,
				success: res => {
					const tempFilePaths = res.tempFilePaths[0];
					uni.uploadFile({
						url: baseUrl+'/file/upload',
						filePath: tempFilePaths,
						name: 'file',
						header: {
							Authorization: uni.getStorageSync('token')
						},
						success: (uploadRes) => {
							const data = JSON.parse(uploadRes.data);
							console.log('图片上传成功', data);
							try {
								// 创建一个新数组并添加新元素
								const newPhotos = [...photo1, { url: data.data.url , name: data.data.name }];
								// 替换整个数组
								photo1.length = 0;
								newPhotos.forEach(item => photo1.push(item));
							} catch (error) {
								console.error('解析接口返回数据失败', error);
								uni.showToast({
									title: '解析接口返回数据失败',
									icon: 'none'
								});
							}
						},
						fail: (err) => {
							console.error('图片上传失败', err);
							uni.showToast({
								title: '图片上传失败',
								icon: 'none'
							});
						}
					});
				}
			})
		}
		function choosePhoto2() {
			uni.chooseImage({
				count: 1,
				success: res => {
					const tempFilePaths = res.tempFilePaths[0];
					uni.uploadFile({
						url: baseUrl+'/file/upload',
						filePath: tempFilePaths,
						name: 'file',
						header: {
							Authorization: uni.getStorageSync('token')
						},
						success: (uploadRes) => {
							const data = JSON.parse(uploadRes.data);
							console.log('图片上传成功', data);
							try {
								// 创建一个新数组并添加新元素
								const newPhotos = [...photo2, { url: data.data.url , name: data.data.name }];
								// 替换整个数组
								photo2.length = 0;
								newPhotos.forEach(item => photo2.push(item));
							} catch (error) {
								console.error('解析接口返回数据失败', error);
								uni.showToast({
									title: '解析接口返回数据失败',
									icon: 'none'
								});
							}
						},
						fail: (err) => {
							console.error('图片上传失败', err);
							uni.showToast({
								title: '图片上传失败',
								icon: 'none'
							});
						}
					});
				}
			})
		}
		function choosePhoto3() {
			uni.chooseImage({
				count: 1,
				success: res => {
					const tempFilePaths = res.tempFilePaths[0];
					uni.uploadFile({
						url: baseUrl+'/file/upload',
						filePath: tempFilePaths,
						name: 'file',
						header: {
							Authorization: uni.getStorageSync('token')
						},
						success: (uploadRes) => {
							const data = JSON.parse(uploadRes.data);
							console.log('图片上传成功', data);
							try {
								// 创建一个新数组并添加新元素
								const newPhotos = [...photo3, { url: data.data.url , name: data.data.name }];
								// 替换整个数组
								photo3.length = 0;
								newPhotos.forEach(item => photo3.push(item));
							} catch (error) {
								console.error('解析接口返回数据失败', error);
								uni.showToast({
									title: '解析接口返回数据失败',
									icon: 'none'
								});
							}
						},
						fail: (err) => {
							console.error('图片上传失败', err);
							uni.showToast({
								title: '图片上传失败',
								icon: 'none'
							});
						}
					});
				}
			})
		}
		function choosePhoto4() {
			uni.chooseImage({
				count: 1,
				success: res => {
					const tempFilePaths = res.tempFilePaths[0];
					uni.uploadFile({
						url: baseUrl+'/file/upload',
						filePath: tempFilePaths,
						name: 'file',
						header: {
							Authorization: uni.getStorageSync('token')
						},
						success: (uploadRes) => {
							const data = JSON.parse(uploadRes.data);
							console.log('图片上传成功', data);
							try {
								// 创建一个新数组并添加新元素
								const newPhotos = [...photo4, { url: data.data.url , name: data.data.name }];
								// 替换整个数组
								photo4.length = 0;
								newPhotos.forEach(item => photo4.push(item));
							} catch (error) {
								console.error('解析接口返回数据失败', error);
								uni.showToast({
									title: '解析接口返回数据失败',
									icon: 'none'
								});
							}
						},
						fail: (err) => {
							console.error('图片上传失败', err);
							uni.showToast({
								title: '图片上传失败',
								icon: 'none'
							});
						}
					});
				}
			})
		}
	
	
	function onLogin(){
		uni.redirectTo({
			url:'/pages/login/login'
		})
	}
	
</script>

<style>
@import "@/common/app.css";
.card{border-radius: 20px; background-color: #fff; margin: 30rpx; padding: 30rpx 20rpx;}
.input_line{ font-weight: 500; margin: 30rpx 10rpx; padding-left: 20rpx; display: flex; justify-content: space-between; align-items: center;}
.input{ border: 1px solid gray; padding: 10rpx 15rpx; border-radius: 20px; font-size: 20rpx; font-weight: 600; }
.big_title{margin-left: 20rpx; font-weight: 600;}	    
.upload-box {display: flex;flex-direction: column; align-items: center;cursor: pointer;}
.plus-icon {font-size: 40px; color: #ccc; margin-bottom: 10px;}
.upload-text {font-size: 12px; color: #999;}

.back-btn{ margin-left: 20rpx; width: 50rpx; height: 50rpx; position: relative;}	
.back-icon { width: 30px; height: 30px;}	
.back-icon::before { content: ""; position: absolute; width: 20px; height: 2px; background-color: #fff; top: 80rpx; left: 47rpx; transform: translate(-50%, -50%); }
.back-icon::after { content: ""; position: absolute; width: 10px; height: 10px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); top: 70rpx; left: 30rpx;}	  
.photo-upload {
	display: flex;
	align-items: center;
	margin-top: 10rpx;
}
.photo-box {
	width: 140rpx;
	height: 140rpx;
	border: 2rpx dashed #ccc;
	border-radius: 12rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #bbb;
	font-size: 28rpx;
	background: #fafbfc;
}
.plus {
	font-size: 48rpx;
	margin-bottom: 8rpx;
}
/* .upload-text {
	font-size: 24rpx;
} */
.photo-img {
	width: 140rpx;
	height: 140rpx;
	border-radius: 12rpx;
	object-fit: cover;
}
</style>
